<script lang="ts" setup>
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import SkuAttributes from './components/SkuAttributes.vue'
import BasicInfo from './components/BasicInfo.vue'
import SalesInfo from './components/SalesInfo.vue'
import FreightInfo from './components/FreightInfo.vue'
import OtherData from './components/OtherData.vue'
import { useGoodsForm } from './composables/useGoodsForm'
import Api from '@/libs/api'

const { t } = useI18n()

defineOptions({
	name: 'product_goods_GoodsForm'
})

const router = useRouter()

const {
	editForm,
	canEditSkuAttrs,
	categoryTree,
	provinces,
	searchedSuppliers,
	skuColumns,
	skuSelects,
	attrVSelects,
	getGoodsInfo,
	generateSkus,
	changeSelSkus,
	supplierSearch,
	onLoadCategroyTree,
	provincesInit,
	doSave,
	getAttrVSelects,
	selVSelSkus
} = useGoodsForm()

onMounted(() => {
	provincesInit()
	getGoodsInfo()
})

const handleSelAttrV = () => {
	attrVSelects.value = getAttrVSelects()
	selVSelSkus()
}

const handleSave = async () => {
	const result = await doSave()
	if (result.success && result.route) {
		// 保存成功后跳转到商品详情页面
		router.push(result.route)
	}
}
</script>

<template>
	<IsGuest>
		<div class="p-4 bg-gray-50 min-h-screen">
			<!-- SKU属性模块 -->
			<div class="mb-6">
				<SkuAttributes
					:edit-form="editForm"
					:can-edit-sku-attrs="canEditSkuAttrs"
					:sku-columns="skuColumns"
					:sku-selects="skuSelects"
					:attr-v-selects="attrVSelects"
					@generate-skus="generateSkus"
					@change-sel-skus="changeSelSkus"
					@sel-attr-v="handleSelAttrV" />
			</div>

			<!-- 基本信息模块 -->
			<div class="mb-6">
				<BasicInfo
					:edit-form="editForm"
					:category-tree="categoryTree"
					:searched-suppliers="searchedSuppliers"
					@supplier-search="supplierSearch"
					@on-load-category-tree="onLoadCategroyTree" />
			</div>

			<!-- 销售信息模块 -->
			<div class="mb-6">
				<SalesInfo :edit-form="editForm" />
			</div>

			<!-- 运费信息模块 -->
			<div class="mb-6">
				<FreightInfo :edit-form="editForm" :provinces="provinces" />
			</div>

			<!-- 其他信息模块 -->
			<div class="mb-6">
				<OtherData :edit-form="editForm" />
			</div>
		</div>

		<footer-toolbar>
			<a-button
				v-if="Api.hasPermission('商品库-商品管理-商品列表')"
				@click="router.push({ path: '/product/goods/list' })">
				{{ t('商品详细.商品列表') }}
			</a-button>
			<a-button
				v-if="Api.hasPermission('商品库-商品管理-复制商品') && editForm.id"
				@click="
					router.push({
						path: '/product/goods/copy',
						query: { copiedById: editForm.id }
					})
				">
				{{ t('商品详细.复制') }}
			</a-button>
			<a-button
				v-if="Api.hasPermission('商品库-商品管理-商品详细') && editForm.id"
				@click="router.push({ path: '/product/goods/info', query: { id: editForm.id } })">
				{{ t('商品详细.详细') }}
			</a-button>
			<a-button
				v-if="Api.hasPermission('商品库-商品管理-素材编辑') && editForm.id"
				@click="
					router.push({
						path: '/product/goods/materialEdit',
						query: { id: editForm.id }
					})
				">
				{{ t('商品详细.素材编辑') }}
			</a-button>
			<a-button
				v-if="Api.hasPermission(editForm.permissionName)"
				type="primary"
				@click="handleSave">
				{{ t('操作.保存') }}
			</a-button>
		</footer-toolbar>
	</IsGuest>
</template>

<style lang="scss" scoped></style>
